<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />
    <canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
    <canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器
// https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '@functional/utils/mousePosition';

export default defineComponent({
  components: { DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      nowPostion: {}
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
    },

    initViewer() {
      let vm = this;
      var viewer = new Cesium.Viewer('cesium-drawer', {
        // imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        animation: false,
        // baseLayerPicker: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          // url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
          url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        }),
        selectionIndicator: false,
        infoBox: false
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        // terrainProvider
      });

      //开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true;

      this.viewer = viewer;
      this.onViewerInited(viewer);

      this.initEffects();

      this.viewer.flyTo(this.viewer.entities);
    },
    initEffects() {
      const viewer = this.viewer;

      /*
          流动纹理线
           color 颜色
           duration 持续时间 毫秒
        */
      function PolylineTrailLinkMaterialProperty(color, duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = new Date().getTime();
      }
      Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
          get: function() {
            return false;
          }
        },
        definitionChanged: {
          get: function() {
            return this._definitionChanged;
          }
        },
        color: Cesium.createPropertyDescriptor('color')
      });
      PolylineTrailLinkMaterialProperty.prototype.getType = function(time) {
        return 'PolylineTrailLink';
      };
      PolylineTrailLinkMaterialProperty.prototype.getValue = function(time, result) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        result.image = Cesium.Material.PolylineTrailLinkImage;
        result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
        return result;
      };
      PolylineTrailLinkMaterialProperty.prototype.equals = function(other) {
        return this === other || (other instanceof PolylineTrailLinkMaterialProperty && Property.equals(this._color, other._color));
      };
      // Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
      Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
      Cesium.Material.PolylineTrailLinkImage = require('../Images/colors.png');
      // Cesium.Material.PolylineTrailLinkImage = require('../Images/arrow.png');
      Cesium.Material.PolylineTrailLinkSource =
        'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
        {\n\
             czm_material material = czm_getDefaultMaterial(materialInput);\n\
             vec2 st = materialInput.st;\n\
             vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
             material.alpha = colorImage.a * color.a;\n\
             material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
             return material;\n\
         }';
      Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
        fabric: {
          type: Cesium.Material.PolylineTrailLinkType,
          uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
            image: Cesium.Material.PolylineTrailLinkImage,
            time: 20
          },
          source: Cesium.Material.PolylineTrailLinkSource
        },
        translucent: function(material) {
          return true;
        }
      });

      viewer.entities.add({
        name: '动态立体墙',
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            117.154815,
            31.853495,
            117.181255,
            31.854257,
            117.182284,
            31.848255,
            117.184748,
            31.840141,
            117.180557,
            31.835556,
            117.180023,
            31.833741,
            117.166846,
            31.833737,
            117.155531,
            31.833151,
            117.154787,
            31.835978,
            117.151994,
            31.839036,
            117.150691,
            31.8416,
            117.151215,
            31.844734,
            117.154457,
            31.848152,
            117.154815,
            31.853495
          ]),
          maximumHeights: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
          minimumHeights: [43.9, 49.4, 38.7, 40, 54, 51, 66.7, 44.6, 41.2, 31.2, 50.1, 53.8, 46.9, 43.9],
          material: new PolylineTrailLinkMaterialProperty(Cesium.Color.ORANGE, 5000)
        }
      });
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
#canvas-a {
  top: 10px;
  display: none;
}

#canvas-b {
  top: 120px;
  display: none;
}
</style>
